<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>购物车</title>
		<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
				box-sizing: border-box;
				font-size: 13px;
			}
			
			ul li {
				list-style-type: none;
			}
			
			.se_gezhongyi {
				width: 1190px;
				overflow: hidden;
				margin: 0px auto;
			}
			
			.se_getop {
				margin-bottom: 30px;
			}
			
			.se_guctrg {
				float: right;
				position: relative;
				top: -10px;
				background-repeat: no-repeat;
				background-image: url(img/suning_gouwuche/steps-bg.png);
				background-position: center;
			}
			
			.se_guctrg li {
				width: 144px;
				height: 70px;
				float: left;
				text-align: center;
				position: relative;
			}
			
			.se_guctrg li span {
				display: block;
				position: relative;
			}
			
			.se_guctrg li .se_gwcnum {
				width: 24px;
				height: 24px;
				left: 58px;
				top: 22px;
				border-radius: 50%;
				line-height: 24px;
			}
			
			.se_gucactive {
				color: white;
				background-color: #FFAA00;
			}
			
			.se_guctrg li .se_gwctext {
				top: 50px;
				font-size: 14px;
				width: 100px;
			}
			
			.se_gwczhong {
				width: 1190px;
				overflow: hidden;
				line-height: 32px;
				font-size: 20px;
				color: #666666;
			}
			
			.se_gwczhonghead {
				width: 1190px;
				border: 1px solid #DDDDDD;
				border-top: 2px solid #DDDDDD;
				overflow: hidden;
				margin-top: 10px;
			}
			
			.se_gwczhonghead div {
				float: left;
				height: 32px;
			}
			
			.se_gwcth01 {
				width: 250px;
				padding-left: 30px;
			}
			
			.se_gwcth02 {
				width: 218px;
			}
			
			.se_gwcth03 {
				width: 145px;
			}
			
			.se_gwcth04 {
				width: 153px;
			}
			
			.se_gwcth05 {
				width: 130px;
			}
			
			.se_gwcth06 {
				width: 190px;
			}
			
			.se_gwcth07 {
				width: 100px;
			}
			
			.se_gwcqx {
				display: inline-block;
				width: 14px;
				height: 14px;
				margin-right: 10px;
			}
			
			.se_gwcartic {
				width: 1190px;
				margin-top: 40px;
				overflow: hidden;
				padding-left: 30px;
			}
			
			.se_gwcartic label,
			p,
			span {
				float: left;
			}
			
			.se_gwctrg {
				float: right;
			}
			
			.se_gwcarf {
				font-weight: bold;
				margin-right: 10px;
			}
			
			.se_gwcarticper {
				margin-right: 20px;
				color: #FF6600;
			}
			
			.se_gwcartic label i {
				font-size: 25px;
				margin: 0px 10px;
				color: #FFAA00;
			}
			
			.se_gwcartic span {
				margin-right: 10px;
				color: #FF6600;
			}
			
			.se_gwcartic a {
				width: 100px;
				line-height: 25px;
				text-align: center;
				text-decoration: none;
				color: white;
				background-color: #FFAA00;
				float: right;
				margin-top: 2px;
			}
			
			.se_gwcdianjia {
				width: 1190px;
				border: 1px solid #E5E5E5;
				height: 122px;
				padding: 20px;
				background-color: #FFFBF2;
			}
			
			.se_gwcdianjia div {
				float: left;
			}
			
			.se_gwcinput {
				width: 50px;
				height: 80px;
				margin-left: 30px;
			}
			
			.se_gwcdjimgdiv {
				border: 1px solid #E5E5E5;
				width: 80px;
				margin-right: 20px;
				height: 80px;
			}
			
			.se_gwcdjimgdiv img {
				width: 100%;
			}
			
			.se_gwcdjadiv a {
				height: 36px;
				display: block;
				width: 239px;
				text-decoration: none;
				line-height: 20px;
				color: #000000;
			}
			
			.se_gwcdjadiv a:hover {
				color: #FF7700;
				text-decoration: underline;
			}
			
			.se_gwcdjpdiv {
				width: 103px;
				margin-left: 70px;
				color: #666666;
			}
			
			.se_gwcdjpdiv p {
				line-height: 20px;
				width: 103px;
			}
			
			.se_gwcdjjiagediv,
			.se_gwcxiaoji {
				width: 100px;
			}
			
			.se_gwcdjjiagediv {
				color: black;
				margin-left: 40px;
			}
			
			.se_gwcxiaoji p {
				font-size: 14px;
			}
			
			.se_gwcxiaoji {
				color: #FA504B;
				font-weight: bold;
				margin-left: 60px;
			}
			
			.se_gwshuliangdiv {
				width: 140px;
			}
			
			.se_gwcjian,
			.se_gwcjia {
				border: 1px solid silver;
				width: 40px;
				height: 35px;
				text-align: center;
			}
			
			.se_gwcjian {
				border-radius: 5px 0px 0px 5px;
			}
			
			.se_gwcshu {
				width: 50px;
				border: 1px solid silver;
				border-left: 0px;
				text-align: center;
				height: 35px;
			}
			
			.se_gwcjia {
				border-radius: 0px 5px 5px 0px;
			}
			
			.se_gwcyiru {
				margin-left: 50px;
			}
			
			.se_gwcyiru:hover .se_gwcsc {
				display: block !important;
			}
			
			.se_gwcsc {
				display: none;
			}
			
			.se_gwcsc a {
				display: block;
				text-align: center;
				line-height: 30px;
				text-decoration: none;
				color: #969696;
			}
			
			.se_gwcyira {
				display: block;
				color: #666666;
				text-decoration: none;
			}
			
			.se_gwcyiru a:hover {
				color: #FF7700;
				text-decoration: underline;
			}
			
			.se_gwcjiesuan {
				width: 1190px;
				border: 1px solid #DDDDDD;
				margin-top: 30px;
				overflow: hidden;
			}
			
			.se_gwcrg label {
				color: #666666;
			}
			
			.se_gwcjiesuaninput {
				width: 199px;
				line-height: 60px;
				float: left;
				padding-left: 30px;
			}
			
			.se_gwcjiesuaninput label {
				margin: 0px 15px;
			}
			
			.se_gwcjiesuaninput a {
				text-decoration: none;
				color: #666666;
			}
			
			.se_gwcjiesuaninput a:hover {
				text-decoration: underline;
			}
			
			.se_gwcjiesuanyixuan {
				width: 100px;
				overflow: hidden;
				line-height: 20px;
				padding: 34px 0px 0px 3px;
				text-align: center;
			}
			
			.se_gwcjiesuanyixuan label {
				color: #F22828;
				font-size: 15px;
				font-weight: bold;
				margin: 0px 4px;
			}
			
			.se_gwcjiesuanzongjia {
				width: 278px;
				overflow: hidden;
				text-align: right;
			}
			
			.se_gwcjdiv01 span,
			b {
				float: right;
			}
			
			.se_gwcjdiv01 b {
				font-size: 16px;
				color: #FA4B4B;
				padding-right: 10px;
			}
			
			.se_gwcjdiv02 p {
				float: right;
				padding-right: 10px;
			}
			
			.se_gwcjiesuanzongjia div {
				display: block;
				width: 278px;
				line-height: 30px;
				overflow: hidden;
			}
			
			.se_gwcqujiesuan {
				width: 90px;
				line-height: 60px;
				background-color: #F22828;
				color: white;
				font-size: 20px;
				text-align: center;
				cursor: pointer;
			}
			
			.se_gwcrg {
				overflow: hidden;
				float: right;
				color: black;
				font-size: 14px;
			}
			
			.se_gwcrg div {
				float: left;
			}
			
			.se_gwclike {
				width: 1190px;
				margin: 30px 0px;
				overflow: hidden;
			}
			
			#se_gwccnxh {
				padding: 20px 25px 20px 85px;
				width: 1190px;
				border: 1px solid #969696;
				overflow: hidden;
				position: relative;
				top: -1px;
			}
			
			#se_gwccnxh div {
				width: 180px;
				float: left;
				margin-right: 35px;
			}
			
			#se_gwccnxh div p {
				width: 180px;
			}
			
			.se_gwcxhsp {
				padding: 10px;
			}
			
			.se_gwcxhp img {
				width: 100%;
			}
			
			.se_gwcxhdf {
				width: 1190px;
				overflow: hidden;
			}
			
			.se_gwcxhp {
				border: 1px solid #969696;
				width: 142px;
				text-align: center;
				color: black;
				font-size: 15px;
				line-height: 40px;
				border-bottom: 1px solid white;
				position: relative;
				z-index: 100;
				cursor: pointer;
			}
			
			.se_gwcje {
				font-size: 18px;
				color: black;
				font-weight: bold;
				line-height: 30px;
			}
			
			.se_gwclq {
				position: relative;
				top: -4px;
			}
			
			.se_gwcjshao a {
				color: #666666;
				line-height: 20px;
				text-decoration: none;
			}
			
			.se_gwcjshao {
				line-height: 20px;
				height: 37px;
				overflow: hidden;
			}
			
			.se_gwcdiaocha {
				border: 1px solid #8E8E8E;
				background-color: #DEDEDE;
				width: 50px;
				line-height: 50px;
				position: fixed;
				right: 0px;
				bottom: 200px;
				cursor: pointer;
				border-radius: 5px;
				text-align: center;
			}
			
			.se_gwcdiaocha i {
				font-size: 20px;
				color: #767676;
			}
			
			.se_gwcdc {
				border: 1px solid #FFAA00;
				background-color: #FFAA00;
				color: white;
			}
			
			.se_gwcdclikai {
				border: 1px solid #8E8E8E;
				background-color: #DEDEDE;
			}
		</style>
		<script src="js/myajax.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			window.onload = function() {
				send("json/text1.json");
			}
			var index = 2;

			function add() {
				send("json/text" + index + ".json");
				index++;
				if(index == 6) {
					index = 1;
				}
			}

			function send(url) {
				var xmlhttp = getxmlhttp();
				var showinfo = function() {
					if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
						var like = document.getElementById("se_gwccnxh");
						var obj = JSON.parse(xmlhttp.responseText);
						var str = "";
						var objstr = "";
						for(var i = 0; i < obj.likes.length; i++) {
							str = "<div><p class='se_gwcxhsp'><img src=" + obj.likes[i].img + "/></p><p class='se_gwcjshao'><a href='#' title=" + obj.likes[i].jianjie + ">" +
								obj.likes[i].jianjie + "</a></p><p><label class='se_gwcje'>" + obj.likes[i].jiage + "</label><label class='se_gwclq'>" + obj.likes[i].liang + "</label></p></div>";
							objstr += str;
						}
						like.innerHTML = objstr;
					}
				}
				ajax("get", url, xmlhttp, showinfo);
			}
			$(function() {
				$(".se_gwcdiaocha").mouseover(function() {
					$(".se_gwcdiaocha").toggleClass("se_gwcdc");
					$(".se_gwcdiaocha").html("调查问卷").css("font-size","12px");

				})

			})
			$(function() {
				$(".se_gwcdiaocha").mouseout(function() {
					$(".se_gwcdiaocha").toggleClass("se_gwcdc");
					$(".se_gwcdiaocha").html("<i class='iconfont'>&#xe6df;</i>");

				})

			})
		</script>

	</head>

	<body>
		<section class="se_gezhongyi">
			<div class="se_gwcdiaocha"><i class="iconfont">&#xe6df;</i></div>
			<div class="se_getop">
				<div>
					<img src="img/suning_gouwuche/snlogo.png" />
					<ul class="se_guctrg">
						<li class="se_gwcli01">
							<span class="se_gwcnum se_gucactive">1</span>
							<span class="se_gwctext">我的购物车</span>
						</li>

						<li class="se_gwcli02">
							<span class="se_gwcnum">2</span>
							<span class="se_gwctext">确认订单</span>
						</li>

						<li class="se_gwcli03">
							<span class="se_gwcnum">3</span>
							<span class="se_gwctext">支付成功</span>
						</li>
						<li class="se_gwcli04">
							<span class="se_gwcnum">4</span>
							<span class="se_gwctext">付款</span>
						</li>
					</ul>
				</div>

			</div>
			<p><label>送货至:</label>
				<select>
					<option>天津</option>
				</select>
			</p>
			<div class="se_gwczhong">
				<div class="se_gwczhonghead">
					<div class="se_gwcth01">
						<label class="se_gwcqx">
						<input type="checkbox" name="" id="" value="" />
					</label>全选
					</div>
					<div class="se_gwcth02">
						商品信息
					</div>
					<div class="se_gwcth03">
						规格
					</div>
					<div class="se_gwcth04">
						单元(元)
					</div>
					<div class="se_gwcth05">
						数量
					</div>

					<div class="se_gwcth06">
						小计(元)
					</div>

					<div class="se_gwcth07">
						操作
					</div>

				</div>
				<div class="se_gwcartic">
					<label>
						<input type="checkbox" name="" id="" value="" />
						<i class="iconfont">&#xe659;</i>
					</label>
					<p class="se_gwcarf">苏宁自营</p>
					<div class="se_gwctrg">

						<p class="se_gwcarticper">运费:￥5:00</p>
						<span>还差46.10元即可免运费</span>
						<a href="#">立即凑单</a>
					</div>
				</div>
				<div class="se_gwcdianjia">
					<div class="se_gwcinput">
						<input type="checkbox" name="" id="" value="" />
					</div>
					<div class="se_gwcdjimgdiv">
						<img src="img/suning_gouwuche/0000000000-000000000126163314_1_400x400.jpg" />
					</div>
					<div class="se_gwcdjadiv">
						<a href="#">【苏宁易购超市】福临门葵花籽原香食用调和油5L</a>
					</div>
					<div class="se_gwcdjpdiv">
						<p>规格：5L</p>
						<p>颜色：葵花籽原...</p>
					</div>
					<div class="se_gwcdjjiagediv">
						<p>￥39.90</p>
					</div>
					<div class="se_gwshuliangdiv">
						<div class="se_gwcjian"><i class="iconfont">&#xe6a1;</i></div>
						<div class="se_gwcshu">1</div>
						<div class="se_gwcjia"><i class="iconfont">&#xe600;</i></div>
					</div>
					<div class="se_gwcxiaoji">
						<p>￥39.90</p>
					</div>
					<div class="se_gwcyiru">
						<a href="#" class="se_gwcyira">移入收藏</a>
						<div class="se_gwcsc">
							<a href="#">删除</a>
							<a href="#">查找相似</a>
						</div>

					</div>
				</div>
				<div class="se_gwcjiesuan">
					<div class="se_gwcjiesuaninput">
						<input type="checkbox" name="" id="" value="" />
						<label>全选</label>
						<a href="#">删除选中商品</a>
					</div>
					<div class="se_gwcrg">
						<div class="se_gwcjiesuanyixuan">
							已选商品<label>1</label>件
						</div>
						<div class="se_gwcjiesuanzongjia">
							<div class="se_gwcjdiv01"><b>￥44.90</b><span>总价(含运费):</span></div>
							<div class="se_gwcjdiv02">
								<p>运费(以结算页为准):<label>￥5:00</label></p>
								<p>为您节省:<label>￥0:00</label></p>
							</div>

						</div>
						<div class="se_gwcqujiesuan">
							去结算
						</div>
					</div>
				</div>
				<!--猜你喜欢-->
				<div class="se_gwclike">
					<div class="se_gwcxhdf">
						<p class="se_gwcxhp" onclick="add()">猜你喜欢</p>
					</div>
					<div id="se_gwccnxh">

					</div>
				</div>
			</div>
		</section>
	</body>

</html>